<script setup lang="ts"></script>

<template>
  <div class="page">
    <div class="container">
      <div class="ring"></div>
      <div class="ring"></div>
      <div class="ring"></div>
      <div class="ring"></div>
      <div class="h3">加载中...</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
body {
  --un-shadow: unset !important; // 或者 initial
}

.page {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #212121b1;
}

.container {
  display: flex;
  justify-content: center; // 水平居中对齐
  align-items: center; // 垂直居中对齐
  position: relative; // 相对定位
}

.h3 {
  color: white; // 设置文字颜色为白色
}

.ring {
  width: 190px; // 设置宽度为190像素
  height: 190px; // 设置高度为190像素
  border: 1px solid transparent; // 设置边框为透明
  border-radius: 50%; // 设置边框圆角为50%
  position: absolute; // 绝对定位
  --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); // 自定义变量（没有应用，保留）

  &:nth-child(1) {
    border-bottom: 8px solid rgb(255, 141, 249); // 设置底部边框颜色为粉色
    animation: rotate1 2s linear infinite; // 应用旋转动画
  }

  &:nth-child(2) {
    border-bottom: 8px solid rgb(255, 65, 106); // 设置底部边框颜色为红色
    animation: rotate2 2s linear infinite; // 应用旋转动画
  }

  &:nth-child(3) {
    border-bottom: 8px solid rgb(0, 255, 255); // 设置底部边框颜色为青色
    animation: rotate3 2s linear infinite; // 应用旋转动画
  }

  &:nth-child(4) {
    border-bottom: 8px solid rgb(252, 183, 55); // 设置底部边框颜色为橙色
    animation: rotate4 2s linear infinite; // 应用旋转动画
  }
}

@keyframes rotate1 {
  from {
    transform: rotateX(50deg) rotateZ(110deg); // 设置起始旋转角度
  }

  to {
    transform: rotateX(50deg) rotateZ(470deg); // 设置结束旋转角度
  }
}

@keyframes rotate2 {
  from {
    transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg); // 设置起始旋转角度
  }

  to {
    transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg); // 设置结束旋转角度
  }
}

@keyframes rotate3 {
  from {
    transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg); // 设置起始旋转角度
  }

  to {
    transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg); // 设置结束旋转角度
  }
}

@keyframes rotate4 {
  from {
    transform: rotateX(70deg) rotateZ(270deg); // 设置起始旋转角度
  }

  to {
    transform: rotateX(70deg) rotateZ(630deg); // 设置结束旋转角度
  }
}
</style>
